/*
 * @Author: szx
 * @Date: 2022-04-29 16:57:51
 * @LastEditTime: 2022-04-29 19:33:49
 * @Description:
 * @FilePath: \learn\React学习\todo-list\src\components\Footer\index.jsx
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';

import './index.css';

export default class index extends Component {
    static propTypes = {
        todos: PropTypes.array.isRequired,
        checkAllTodo: PropTypes.func.isRequired,
        clearAllDoneTodo: PropTypes.func.isRequired
    };

    handleCheckAllTodo = (e) => {
        this.props.checkAllTodo(e.target.checked);
    };

    handleClearAllDone = () => {
        this.props.clearAllDoneTodo();
    };
    render() {
        const { todos } = this.props;
        const total = todos.length;
        const doneCount = todos.reduce((pre, cur) => pre + cur.done, 0);
        return (
            <div className="todo-footer">
                <label>
                    <input onChange={this.handleCheckAllTodo} checked={doneCount === total && total !== 0} type="checkbox" />
                </label>
                <span>
                    <span>已完成{doneCount}</span> / 全部{total}
                </span>
                <button onClick={this.handleClearAllDone} className="btn btn-danger">
                    清除已完成任务
                </button>
            </div>
        );
    }
}
